<template>
  <!-- 邀请 -->
  <view class="box">
    <view class="ivn-header">
      <view class="img-box">
        <image class="initial" :src="headimg" mode=""></image>
      </view>
      <view class="mess">
        <view class="username">{{username}}</view>
        <view class="ext">剩余使用时间：<span class="residue-text">{{timer == "暂未开通" || timer == "已过期" ? '0天' : exptime }}</span><span></span></view>
      </view>
    </view>
    <view class="" style="background-color: #fff;border-radius: 15rpx;height: 250rpx;">
      <view class="ivn-cont" >
        <view class="ivn-box1"  @click="">
          <image class="promo" src="https://www.iwangbang.com/skin/wx_mp_aixz/promo.png" mode=""></image>
        <view class="">
          <view class="">已邀请</view>
          <view class="">{{people}}人</view>
        </view>
        </view>
        <view class="ivn-box2">
          <view class="yqbox">
            <image class="yqfriend" src="https://www.iwangbang.com/skin/wx_mp_aixz/yqfriend.png" mode=""></image>
          </view>
          <view class="" style="margin-left: 15rpx;">
            <view class="inuer-box">
              <view >邀请新用户</view>
              <view class=""><button class="yqbutton" open-type="share">去邀请</button></view>
            </view>
      </view>
          
        </view>
      </view>
      <view class="inuer-text">每成功邀请一人，奖励三天无限次数可叠加！</view>
      <scroll-view class="dialogue-box" :scroll-y="true"  :scroll-top="scrollTop" style="">
        <uni-table border stripe emptyText="暂无更多数据" >
        	<!-- 表头行 -->
        	<uni-tr>
        		<uni-th width="100" align="">昵称</uni-th>
        		<uni-th width="120"  align="">电话</uni-th>
        		<uni-th  width="120" align="">注册时间</uni-th>
        	</uni-tr>
        	<!-- 表格数据行 -->
        	<uni-tr v-for="(item) in list" :key="item.id">
        		<uni-td>{{item.username == null ? '' : item.username }}</uni-td>
        		<uni-td>{{item.tel == null ? '' : item.tel }}</uni-td>
        		<uni-td>{{item.regtime}}</uni-td>
        	</uni-tr>
        </uni-table>
      </scroll-view>
   
      
    </view>
    
  <!--  <view class="ivn-share">
      <view class="yqbox">
        <image class="yqfriend" src="/static/yqfriend.png" mode=""></image>
      </view>
      <view class="" style="margin-left: 15rpx;">
        <view class="inuer-box"><view style="font-size: 32rpx;font-weight: 700;">邀请新用户</view><view class=""><button class="yqbutton" open-type="share" @click="getinvite">去邀请</button></view></view>
        <view class="inuer-text">每成功邀请一人，奖励一天无限次数可叠加！</view>
      </view>
    </view> -->
    <view class="">
      <!-- 分享海报 -->
    </view>
  </view>
</template>

<script>
  export default {
    onLoad(e) {
      console.log(e);
      this.userinfo()
      this.getinituser()
      this.getTimer()
      this.username = uni.getStorageSync('wbyun_username');
    },
    onShow() {
      this.username = uni.getStorageSync('wbyun_username');
      this.headimg = uni.getStorageSync('wbyun_headimg');
    },
    onShareTimeline:function(res){
          return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            query: "inviteCode="+uni.getStorageSync('wbyun_icode')
          }
        },
    onShareAppMessage(res) {
      console.log(res);
      console.log(uni.getStorageSync('wbyun_icode'));
      return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            path: '/pages/index/index?inviteCode=' + uni.getStorageSync('wbyun_icode')
          }
    },
    data(){
      return {
        username:'无昵称',
        people:0,
        timer:'',
        exptime:0,
        list:[],
        scrollTop:0,
        headimg:''
      }
    },
    methods:{
      userinfo() {
        uni.request({
        	url: getApp().globalData.apiDomain+'/api/getUserInfo',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
              console.log(res.data.datas.tel);
              if(res.data.datas.tel == null) return
              uni.setStorageSync('wbyun_tel',res.data.datas.tel)
           
            
        		} else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      getinituser() {
          uni.request({
          	url: getApp().globalData.apiDomain+'/invite/myinvite',
          	method: 'POST',
          	header: {
          		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
          		'token': uni.getStorageSync('wbyun_token'),
              'wbapp':'weixin_mp_xbgy'
          	},
          	data: {},
          	dataType: 'json',
          	success:  res => {
              console.log(res);
          		if (res['data']['code'] == 200) {
                 console.log(res.data.datas.list.length);
                 this.list = res.data.datas.list
                 this.people = res.data.datas.list.length
          			return;
          		} else { 
          			uni.showToast({
          				title: res['data']['msg'],
          				icon: 'none'
          			});
          		}
          	},
          	fail: () => {},
          	complete: () => {
          	}
          });
      },
      getTimer() {
        uni.request({
        	url: getApp().globalData.apiDomain+'/vip/getVIPEndTime',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {},
        	dataType: 'json',
        	success:  res => {
            console.log(res);
        		if (res['data']['code'] == 200) {
        
             this.timer = res.data.datas
              let jsc = Date.parse(res.data.datas) - Date.now()
              this.convertTimestamp(jsc)
        			return;   
        		}else if(res['data']['code'] == '100500') {
              uni.showToast({
              	title:res['data']['msg'],   
              	icon: 'none'
              });
              uni.setStorageSync('wbyun_token', '');
            } else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
      convertTimestamp(timestamp) {
           let timediff =  timestamp / 1000
           let hours = parseInt(timediff / 3600);
           this.exptime =  Math.ceil(hours / 24)
           if(this.exptime > 1800) {
             this.exptime = '永久免费'
           }else {
             this.exptime = this.exptime + '天'
           }
           
      },
    }
  }
</script>

<style>
  body {
    background-color: rgb(247,247,247);
  }
  .box {
    width: 98%;
    margin: auto;
  }
  .ivn-header{
    width: 100%;
    height: 200rpx;
    border-radius: 15rpx;
    margin: auto;
    background-color: #54a7fe;
   display: flex;
   align-items: center;
  }
  .img-box {
    width: 130rpx;
    height: 130rpx;
    margin-left: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: rgb(230,230,230);
  }
  .initial {
   width: 130rpx;
   height: 130rpx;
   border-radius: 50%;
   background-color: #c8c8c8;
  }
  .mess {
    margin-left: 25rpx;
    color: #fff;
  }
  .username {
    font-size: 35rpx;
    margin: 10rpx 0;
  }
  .ext {
    padding: 20rpx 25rpx;
    height: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 25rpx;
    border-radius: 20rpx;
    border: 2rpx solid #fff;
  }
  .ivn-cont {
    width: 100%;
    height: 180rpx;
    display: flex;
    justify-content: space-between;
   
    
    margin-top: 30rpx;
  }
 
  .ivn-box1 {
    /* background-color: red; */
  }
  .ivn-box1 {
    width: 50%;
    height: 180rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1rpx solid #f7f7f7;
  }
  .ivn-box2  {
    width: 50%;
    height: 180rpx;
    display: flex;
    align-items: center;
  }

/*  .ivn-box1 {
    border-bottom: 1rpx solid rgb(238, 238, 238);
  } */
  .promo {
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }
  .order {
    width: 90rpx;
    height: 90rpx;
    margin-right: 10rpx;
  }
  .ivn-share {
    width: 100%;
    height: 300rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
  }
  .inuer-box {
   
  }
  .yqbutton {
    width: 120rpx;
    height: 50rpx;
    font-size: 25rpx;
    line-height: 50rpx;
    padding: 0;
    background-color: #54a7fe;
    color: #fff;
    border: 0;
    border-radius: 30rpx;
    margin-top: 15rpx;
  }
  .yqbox {
    width: 120rpx;
    height: 120rpx;
    margin-left: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(249,247,243);
  }
  .yqfriend {
    width: 80rpx;
    height: 80rpx;
  }
  .inuer-text {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    color: #bababa;
    margin-bottom: 30rpx;
  }
  .dialogue-box {
    padding: 20rpx;
    background-color: #fff;
  }

</style>